<script setup lang="ts">
interface edgeBox {
  name?: string;
  ip?: string;
}
const props = withDefaults(defineProps<edgeBox>(), {
  name: "123213",
  ip: "192.168.0.1"
});
</script>

<template>
  <div class="edge-box">
    <div class="edge-box-item"><span>名称：</span>{{ props.name }}</div>
    <div class="edge-box-item">
      <span>IP：{{ props.ip }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.edge-box {
  width: 23.95%;
  height: 7vh;
  color: rgb(255, 255, 255);
  font-size: 88%;
  display: flex;
  flex-flow: row wrap;
  // justify-content: center;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 6px;
  background-color: rgb(42, 147, 253);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* 水平偏移量 0，垂直偏移量 4px，模糊半径 6px，阴影颜色 rgba(0, 0, 0, 0.1) */
  .edge-box-item {
    width: 100%;
    padding-left: 1vh;
    padding-top: 0.5vh;
    display: flex;
    align-items: center;
  }
}
</style>
